<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <!-- 传的参数名必须和searchModel.stuId，必须和后端一模一样 -->
            <el-input v-model="searchModel.stuId" placeholder="学号" clearable></el-input>
            <el-input v-model="searchModel.stuName" placeholder="姓名" clearable></el-input>
            <el-input v-model="searchModel.grade" placeholder="年级" clearable></el-input>
            <el-button @click="getSchoList" type="primary" round icon="el-icon-search">查询</el-button>
        </el-col>
        <el-col :span="4" align="right">
            <el-button @click="openEditUI()" type="primary" icon="el-icon-plus" circle>点击申请奖学金</el-button>
        </el-col>
      </el-row>
    </el-card>


    <!-- 结果列表 -->
    <el-card>
       <el-table
          :data="scholarship"
          stripe
          style="width: 100%">
          <!-- prop属性名必须和返回的请求中的键值名一样才行否则无法渲染成功 -->
          <el-table-column
            type="index"
            label="#"
            width="70">
            <!-- (pageNo-1)*pageSize+index+1 -->
            <template slot-scope="scope">
                {{(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
            </template>
            
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="studentId"
            label="学号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="grade"
            label="年级"
            width="100">
          </el-table-column>
          <el-table-column
            prop="scho"
            label="奖项"
            width="100">
          </el-table-column>
          <!-- <el-table-column
            prop="scholarshipS"
            label="奖金"
            width="100">
          </el-table-column> -->
          <el-table-column
            prop="status"
            label="审核状态"
            width="100">
          </el-table-column>
          
          
        </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 奖学金申请框 -->
    <el-dialog @close="clearForm" title="奖学金申请功能"  :visible.sync="dialogVisible">
      <el-form  :model="schoInfoform" ref="schoInfoform">

        <!-- <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="schoInfoform.stuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth">
          <el-input type="passwd"  v-model="schoInfoform.passwd" autocomplete="off"></el-input>
        </el-form-item> -->
        
        <el-form-item label="申请人姓名" prop="name">
          <el-input v-model="schoInfoform.stuName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请人年级" prop="grade">
          <el-input v-model="schoInfoform.grade" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请人学号" prop="studentId">
          <el-input v-model="schoInfoform.stuId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        

        <el-form-item label="申请奖学金类型" prop="scholarshipType" class="center">
          <el-select v-model="schoInfoform.scholarshipType" placeholder="请选择申请奖学金类型" style="width: 120%;">
            <el-option label="国家奖学金" value="first"></el-option>
            <el-option label="市级奖学金" value="second"></el-option>
            <el-option label="校级奖学金" value="third"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveScho" >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
import schoInfoApi from '@/api/schoInfo'

export default {
  data(){
    return{
      dialogVisible: false,
      schoInfoform: {
        scholarshipType: ''
      },
      rules: {
        scholarshipType: [
          { required: true, message: '请选择申请奖学金类型', trigger: 'change' }
        ]
      },
      searchModel:{
        total:0,
        pageNo: 1,
        pageSize: 1

      },
      scholarship:[]

    }
  },
  
  methods:{
    clearForm(){
      this.schoInfoform.scholarshipType = '';
      this.$refs.schoInfoformRef.clearValidate();
      
    },
    handleSizeChange(pageSize){
      this.searchModel.pageSize = pageSize;
      this.getSchoList();

    },
    handleCurrentChange(pageNo){
      this.searchModel.pageNo = pageNo;
      this.getSchoList();

    },
    getSchoList(){
        schoInfoApi.getSchoList(this.searchModel).then(Response => {
          // debugger
          // console.log("请求log",Response);
          this.scholarship = Response.data.rows;
          this.total = Response.data.total
        })
    },

    saveScho(){
      //触发表单验证
      this.$refs.schoInfoform.validate(valid => {
        if (valid) {
          //提交请求给后台
          schoInfoApi.addSchoInfo(this.schoInfoform).then(Response => {
            //成功提示
            this.$notify({
              title: '成功',
              message: '申请已成功提交',
              dialogVisible : false,
              type: 'success',
              duration: 2000 // 设置通知显示时间为 2 秒
            });
            //关闭对话框
            this.dialogVisible = false;
            //刷新表格
            this.getSchoList();
          });
          this.$confirm('确认提交申请吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            
            console.log('Form data:', this.form);
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        } else {
          return false;
        }
      });
    },
    openEditUI(){
      //根据stuId查询用户
      this.dialogVisible = true;
      
    },
    load(){
      schoInfoApi.getUser().then(Response =>{
        console.log(Response)
        this.schoInfoform.stuName = Response.data.student.name
        this.schoInfoform.stuId = Response.data.student.studentId
        this.schoInfoform.grade =  Response.data.student.grade
      })
       
    }
  },
  //钩子函数：异步调用生成数据渲染在前端
  created(){
    this.getSchoList();
    this.load()
  }

}
</script>

<style>
#search .el-input{
  width: 200px;
  margin-right: 10px;
}

.top-left {
  /* position: relative; */
  top: -10px; /* 向上微调10像素 */
  right: -20px; /* 向右微调10像素 */
}

.rounded-button {
  border-radius: 10px; /* 设置按钮的圆角大小 */
}

.rounded-dialog {
  border-radius: 10px; /* 设置对话框的圆角大小 */
}

.dialog-footer .el-button {
  border-radius: 10px; /* 设置对话框内按钮的圆角大小 */
}

.el-dialog .el-input{
  width: 85%
}
.center {
  display: flex;
  justify-content: center;
}

</style>